<template>
  <span @click="fn"> {{ modelValue ? '✅' : '💥' }} {{ label }} </span>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const fn = () => {
      // 1. modelValue 取反
      // 2. 通知父组件
      const temp = !props.modelValue
      emit('update:modelValue', temp)
    }
    return { fn }
  },
}
</script>

<style></style>
